<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>角色管理-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/css/font.css">
  <link rel="stylesheet" href="../../../static/css/weadmin.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <style>
    td {
      line-height: 55px;
      font-size: 18px;
      vertical-align: middle;
      margin-top: 7px;
    }
    input[type="checkbox"] {
      height: 25px;
      width: 25px;
      vertical-align: middle;
      margin-left: 30px;
      line-height: 40px;
    }
    input[type=checkbox]:checked{
      background-color: white;
      color: #00FF00;
    }
  </style>
</head>

<body>
  <div class="weadmin-body">
    <form action="" method="post" class="layui-form-pane">
      <div class="layui-form-item">
        <label for="name" class="layui-form-label">
          <span class="we-red">*</span>角色名
        </label>
        <div class="layui-input-inline">
          <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">
          拥有权限
        </label>
        <table class="layui-table layui-input-block">
          <tbody>
            <tr>
              <td>
                用户管理
                <input name="userAll" type="checkbox" id="user-manage" value="用户管理" style="margin-left: 0">
              </td>
              <td>
                <div>
                  <input name="user" type="checkbox" value="用户删除"> 用户删除
                  <input name="user" type="checkbox" value="用户修改"> 用户修改
                  <input name="user" type="checkbox" value="用户改密"> 用户改密
                  <input name="user" type="checkbox" value="用户停用"> 用户停用
                  <input name="user" type="checkbox" value="用户列表"> 用户列表
                </div>
              </td>
            </tr>
            <tr>
              <td>
                商品管理
                <input name="productAll" id="product-manage" type="checkbox" value="商品管理" style="margin-left: 0">
              </td>
              <td>
                <div class="">
                  <input name="product" type="checkbox" value="商品添加"> 商品添加
                  <input name="product" type="checkbox" value="商品删除"> 商品删除
                  <input name="product" type="checkbox" value="商品修改"> 商品修改
                  <input name="product" type="checkbox" value="商品停用"> 商品停用
                  <input name="product" type="checkbox" value="商品列表"> 商品列表
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label">
          描述
        </label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn add" lay-submit="" lay-filter="add">增加</button>
      </div>
    </form>
  </div>
  <script src="../../../static/lib/layui/layui.js" type="text/javascript"></script>
  <script>
    $("#product-manage").click(function () {
      $("input[name='product']").prop("checked",this.checked)
    })

    $("input[name='product']").click(function () {
      var check_flag = false
      $("input[name='product']").each(function () {
        if (!$(this).prop('checked')) {
          check_flag = true
        }
      })
      if (check_flag) $("input[name='productAll']").prop("checked",false)
      else $("input[name='productAll']").prop("checked",this.checked)
    })

    $("#user-manage").click(function () {
      $("input[name='user']").prop("checked",this.checked)
    })

    $("input[name='user']").click(function () {
      var check_flag = false
      $("input[name='user']").each(function () {
        if (!$(this).prop('checked')) check_flag = true
      })
      if (check_flag) $("input[name='userAll']").prop("checked",false)
      else $("input[name='userAll']").prop("checked",this.checked)
    })
    // var check_flag = false
    // $("input[name='product']").click(function () {
    //   $("input[name='product']").each(function () {
    //     alert($(this).attr("checked"))
    //     if ($(this).attr("checked")) {
    //       check_flag = true
    //     }
    //   })
    //   if (check_flag) $("#product-manage").attr("checked",true)
    //   else $("#product-manage").removeAttr("checked")
    // })
  </script>
  <script type="text/javascript">
    layui.extend({
      admin: '{/}../../static/js/admin'
    });
    layui.use(['form', 'layer', 'admin', 'jquery'], function () {
      var form = layui.form,
              admin = layui.admin,
              $ = layui.jquery,
              layer = layui.layer;

      //监听提交
      var permission = ""
      var name = ""
      var desc = ""
      $(".add").click(function () {
        if ($("#user-manage").prop("checked")) {
          permission+=$("#user-manage").val()
          permission+="，"
        } else {
          $("input[name='user']:checked").each(function () {
            permission+=$(this).val()
            permission+="，"
          })
        }
        if ($("#product-manage").prop("checked")) {
          permission+=$("#product-manage").val()
          permission+="，"
        } else {
          $("input[name='product']:checked").each(function () {
            permission+=$(this).val()
            permission+="，"
          })
        }
        permission = permission.substring(0,permission.length-1)
        name = $("#name").val()
        desc = $("#desc").val()
      })
      form.on('submit(add)', function () {
        var role_data = {roleName: name,permission: permission,description: desc}
        $.post({
          url: "/role/add",
          contentType: "application/json;charset=UTF-8",
          data: JSON.stringify(role_data),
          dataType: "json",
          success: function (data) {
            var length = parent.$("tbody").children("tr").length
            var num = parseInt(parent.$(".fr>span").html())
            $(".fr>span", window.parent.document).html(++num);
            if (length<10) {
              var add = "<tr data-id='"+data+"'>\n" +
                      "          <td>\n" +
                      "            <div class=\"layui-unselect layui-form-checkbox\" lay-skin=\"primary\" data-id='"+data+"'><i\n" +
                      "                class=\"layui-icon layui-icon-ok\"></i></div>\n" +
                      "          </td>\n" +
                      "          <td>"+data+"</td>\n" +
                      "          <td>"+name+"</td>\n" +
                      "          <td>"+permission+"</td>\n" +
                      "          <td>"+desc+"</td>\n" +
                      "          <td class=\"td-status\">\n" +
                      "            <span class=\"layui-btn layui-btn-normal layui-btn-xs\">已启用</span></td>\n" +
                      "          <td class=\"td-manage\">\n" +
                      "            <a onclick=\"member_stop(this,'10001')\" href=\"javascript:;\" title=\"启用\">\n" +
                      "              <i class=\"layui-icon layui-icon-download-circle\"></i>\n" +
                      "            </a>\n" +
                      "            <a title=\"编辑\" onclick=\"WeAdminShow('编辑','./role-add.html')\" href=\"javascript:;\">\n" +
                      "              <i class=\"layui-icon layui-icon-edit\"></i>\n" +
                      "            </a>\n" +
                      "            <a title=\"删除\" onclick=\"member_del(this,'要删除的id')\" href=\"javascript:;\">\n" +
                      "              <i class=\"layui-icon layui-icon-delete\"></i>\n" +
                      "            </a>\n" +
                      "          </td>\n" +
                      "        </tr>"
              parent.$('#roleList').append(add)
            }
          },
          async: false
        })
        layer.alert("增加成功", {
          icon: 6
        }, function () {
          // 获得frame索引
          var index = parent.layer.getFrameIndex(window.name);
          //关闭当前frame
          parent.layer.close(index);
        });
        return false;
      });

    });
  </script>
</body>

</html>